<template>
    <div class="find">
        <h1>{{finds.title}}</h1>
        <vue-carousel>
            <li v-for="(find,i) in finds.items" :key="i" :style="{borderColor: find.color}">
                <a :style="{color: find.color}" @click="toClass(find.searchWord)">{{find.content}}</a>
            </li>
        </vue-carousel>
    </div>
</template>

<script>
    import VueCarousel from './vue-carousel.vue'

    export default {
      name: "BaseFind",//彩色滑动
        props: ['finds'],
        methods: {
            toClass(tag) {
                this.$emit('toClass', tag);
            }
        },
        components: {
            VueCarousel
        }
    }
</script>

<style lang="less">
.find {
  padding: 10px;
  h1{
    text-align: left;
  }
    ul {
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        li {
            margin: 0 8px 8px 0;
            padding: 0 25px;
            border-radius: 5px;
            border: 1px solid;
            height: 50px;
            line-height: 50px;
            letter-spacing: 2px;
            overflow: auto;
            text-align: center;
            font-size: 17px;
        }
    }
}
</style>
